<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>

</head>
<body>
<div id="box"></div>
<script>
    // $('#box').animate({
    //     width: 600,
    //     opacity: 0.8,
    //     top:'100px'
    // },5000,'swing',function () {
    //     alert('动画完成')
    // })

    $(function () {
        function aaaa(time) {
            if (time > 400) {
                return
            }
            $('#box').animate({width: 600 - time}, 100, function () {
                $('#box').animate({width: 100, left: 500 - time}, 100, function () {
                    $('#box').animate({height: 400 - time}, 100, function () {
                        $('#box').animate({height: 100, top: 300 - time}, 100, function () {
                            $('#box').animate({width: 600 - time, left: 0 + time}, 100, function () {
                                $('#box').animate({width: 100, left: 0 + time}, 100, function () {
                                    $('#box').animate({height: 400 - time, top: 0 + time}, 100, function () {
                                        $('#box').animate({height: 100, top: 0 + time}, 100, function () {
                                            aaaa(time += 100);
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            });

        }

        aaaa(0)
    })


</script>
</body>
</html>